<template>
  <div class="people-detail">
    <a-row :gutter="10">
      <a-col :span="6">
        <avatar :src="peopleMsg.head_img" />
      </a-col>
      <a-col :span="18">
        <descriptions :col-span="24" :columns="columns.slice(0, 4)" :data-source="peopleMsg" />
      </a-col>
    </a-row>
    <descriptions :col-span="24" :columns="columns.slice(4)" :data-source="peopleMsg" />
  </div>
</template>

<script>
import get from 'lodash-es/get.js';
import Avatar from '@gis/lib/components/img-viewer/avatar-card.vue';
import { gridTeamPeopleDetails } from '@gis/lib/api';
import { handleCommonRes } from '@gis/lib/utils/resolver.js';
import { getEnumText } from '@gis/lib/enums/index.js';

export default {
  name: 'people-detail',
  components: { Avatar },
  props: {
    detail: { type: Object, default: () => {} },
  },
  data() {
    return {
      peopleMsg: {},
      columns: [
        { label: '姓名', key: 'name' },
        { label: '性别', key: 'sex', format: (v) => getEnumText('gender', v) },
        { label: '部门', key: 'department' },
        { label: '人员类型', key: 'typeName' },
        { label: '所在单位', key: 'unit_name_concat' },
        // { label: '职务', key: 'typeName' },
        { label: '文化程度', key: 'education' },
        { label: '民族', key: 'nation' },
        { label: '婚姻状况', key: 'marital_status' },
        { label: '政治面貌', key: 'politics_status' },
        { label: '入职时间', key: 'hiredate' },
        { label: '户籍地', key: 'register_address' },
        { label: '通讯地址', key: 'present_address' },
      ],
    };
  },
  created() {
    this.getPeopleDetail();
  },
  methods: {
    async getPeopleDetail() {
      const data = await handleCommonRes(gridTeamPeopleDetails, this.detail.id, { defaultValue: {} });
      this.peopleMsg = get(data, 'people', {});
    },
  },
};
</script>

<style scoped lang="less">
.people-detail {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
}
</style>
